<template>
	<view class="content">
		<view class="nav" v-if="index !=2">
			<view class="topbox">
				<view class="active">
					<view class="article">
						<view class="otherBox">
							<!-- 未登录 -->
							<view class="btnbox" v-if="!isLogin" @tap="tologin">
								<view class="imgbox">
									<image src="../../static/xiaoyuan.png" mode=""></image>
								</view>
								<text class="right">未登录</text>
							</view>
							<!-- 已登录 -->
							<view class="userbox" v-if="isLogin">
								<view class="imgbox">
									<image :src="userInfo.avatarUrl" mode=""></image>
								</view>

								<view class="usernamebox" v-if="index==0">
									<text
										style="font-size: 40rpx;font-weight: bold;margin-bottom: 6rpx;color: #fff;">{{showshujv.user_im.nick}}</text>
									<text>{{showshujv.school_name}}</text>

								</view>
								<view class="usernamebox1" v-if="index==1">
									<text
										style="font-size: 40rpx;font-weight: bold;margin-bottom: 6rpx;color: #fff;">{{showshujv.user_im.nick}}</text>

									<view class="">
										<text>{{showshujv.class.school_name}}</text>
									</view>
								</view>

							</view>
						</view>

					</view>
					<view class="bottombox" v-if="index==0">
						<view class="changebox" v-if="isLogin">
							<view @tap="tochange">
								<image src="../../static/change.png" mode=""></image>
							</view>
						</view>
						<view class="onebox onebox2">
							<text class="topone">{{showshujv.class_name?showshujv.class_name:"班级"}}</text>
							<text class="toptwo">班级</text>
						</view>
						<view class="onebox ">
							<text class="topone">{{showshujv.num?showshujv.num:"学号"}}</text>
							<text class="toptwo">学号</text>
						</view>
						<view class="onebox">
							<text class="topone">{{showshujv.link_man?showshujv.link_man:"班主任"}}</text>
							<text class="toptwo">班主任</text>
						</view>
					</view>
					<view class="bottombox" v-if="index==1">
						<view class="changebox" v-if="isLogin">
							<view @tap="tochange">
								<image src="../../static/change.png" mode=""></image>
							</view>
						</view>

						<view class="onebox onebox2">
							<text class="topone">{{showshujv.class.class_name}}</text>
							<text class="toptwo">班级</text>
						</view>
						<view class="onebox ">
							<text class="topone">{{showshujv.student_nums}}</text>
							<text class="toptwo">学生数</text>
						</view>
					</view>
				</view>
			</view>
			<view class="constant">
				<view class="zhihui" v-if="index==0">
					<view class="zhihuilist">
						<view class="zhihuibottom" @tap="tokebiao">
							<image src="../../static/kebiao.png" mode=""></image>
							<text>课表</text>
						</view>
						<view class="zhihuibottom" @tap="toclass">
							<image src="../../static/class.png" mode=""></image>
							<text>班级公告</text>
						</view>
						<view class="zhihuibottom" @tap="toschool(school_id)">
							<image src="../../static/schoolgg.png" mode=""></image>
							<text>学校公告</text>
						</view>
						<view class="zhihuibottom" @tap="toteacher">
							<image src="../../static/wenjuan.png" mode=""></image>
							<text>问卷调查</text>
						</view>
						<view class="zhihuibottom" @tap="toleader">
							<image src="../../static/news.png" mode=""></image>
							<text>领导信箱</text>
						</view>
						<view class="zhihuibottom" @tap="tojiazhang">
							<image src="../../static/jiazhang.png" mode=""></image>
							<text>家长助手</text>
						</view>
						<view class="zhihuibottom" @tap="toweekfood(school_id)">
							<image src="../../static/weekfood.png" mode=""></image>
							<text>校园食谱</text>
						</view>
						<view class="zhihuibottom" @tap="toshoping">
							<image src="../../static/dog.png" mode=""></image>
							<text>校园商城</text>
						</view>
					</view>
				</view>
				<view class="zhihui" v-if="index==1">
					<view class="zhihuilist zhihuilist1">
						<view class="zhihuibottom" @tap="toteacherclass">
							<image src="../../static/class.png" mode=""></image>
							<text>班级公告</text>
						</view>
						<view class="zhihuibottom" @tap="toleader">
							<image src="../../static/news.png" mode=""></image>
							<text>领导信箱</text>
						</view>
						<view class="zhihuibottom" @tap="tojiazhang">
							<image src="../../static/jiazhang.png" mode=""></image>
							<text>教师助手</text>
						</view>
						<view class="zhihuibottom" @tap="toteacher">
							<image src="../../static/wenjuan.png" mode=""></image>
							<text>问卷调查</text>
						</view>
					</view>
				</view>
			</view>
			<view class="bottmgg">
				<view class="titlebox">
					<text>通知公告</text>
				</view>

				<view class="kongimg" v-if="gglist.length<1">
					<image src="../../static/wutongzhi.png" mode=""></image>
					<text>暂无通知</text>
				</view>
				<view class="ggcontentbig" v-if="gglist.length>0">
					<view class="ggcontent" v-for="(item,index) in gglist" :key="index" @tap="ggxiangqing(item.id)">
						<view class="topgg">
							<view class="titlesf">
								<text>{{item.newsname}}</text>
							</view>
							<view class="">
								<text>{{item.time}}</text>
							</view>
						</view>
						<view class="bottomcontent">
							<text>{{item.summary}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="jiaoyu" v-if="index==2">
			<view class="topbig">
				<view class="topbox">

				</view>
				<view class="topbottom">

				</view>
				<view class="centerbox">
					<view class="center">

						<view class="centertop">
							<text>{{showshujv.company_name}}</text>
						</view>
						<view class="centerbottom">
							<text>{{showshujv.user_name}}</text>
							<view class="changebox">
								<view @tap="tochange">
									<image src="../../static/change.png" mode=""></image>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="bottombox" v-if="status == 'pt_admin'">
				<view class="bottomcenter">
					<view class="yingyongwenzi">
						<text>应用</text>
					</view>
					<view class="yingyongbtn">
						<view class="zhihuibottom" @tap="tojiazhang">
							<image src="../../static/newsnav.png" mode=""></image>
							<text>消息中心</text>
						</view>
						<view class="zhihuibottom" @tap="toteacher">
							<image src="../../static/wenjuan.png" mode=""></image>
							<text>问卷调查</text>
						</view>
					</view>
				</view>

			</view>
			<view class="bottombox1" v-if="status=='admin'">
				<view class="ribao">
					<text>日报管理</text>
				</view>
				<view class="bottomcenter bottomcenter1">
					<view class="topleft">
						<view class="atrule">
							<view class="leftcneter">
								<image src="../../static/xuexiaoxinxi.png" mode=""></image>
								<text>学校信息</text>
							</view>
						</view>
						<view class="atrulebottom">
							<text>学校{{daily.school.school_nums}}所</text>
							<!-- <image src="../../static/deng.png" mode=""></image> -->
							<image v-if="daily.school.status==1" src="../../static/shangsheng.png" mode=""></image>
							<image v-if="daily.school.status== -1" src="../../static/xiajiang.png" mode=""></image>
							<image v-if="daily.school.status== 0" style="width: 25rpx;height: 6rpx;"
								src="../../static/deng.png" mode=""></image>
						</view>
					</view>
					<view class="topright">
						<text>幼儿园{{daily.school.school_nums}}</text>
					</view>
				</view>
				<view class="bottomcenter" @tap="tomember">
					<view class="article">
						<view class="topleft">
							<view class="atrule">
								<view class="leftcneter">
									<image src="../../static/xiaoren.png" mode=""></image>
									<text>成员信息</text>
								</view>
							</view>
							<view class="atrulebottom">
								<text>成员{{daily.member.member_nums}}人</text>
								<image v-if="daily.member.status==1" src="../../static/shangsheng.png" mode=""></image>
								<image v-if="daily.member.status== -1" src="../../static/xiajiang.png" mode=""></image>
								<image v-if="daily.member.status== 0" style="width: 25rpx;height: 6rpx;"
									src="../../static/deng.png" mode=""></image>
							</view>
						</view>
						<view class="topright">
							<text>老师{{daily.member.teacher_nums}}</text>
							<!-- <text>学生{{daily.member.student_nums}}</text> -->
							<text>家长{{daily.member.parent_nums}}</text>
						</view>
					</view>
					<view class="jump">
						<image src="../../static/jiantou.png" mode=""></image>
					</view>
				</view>
				<view class="bottomcenter" @tap="tonewsteng">
					<view class="article">
						<view class="topleft">
							<view class="atrule">
								<view class="leftcneter">
									<image src="../../static/xiaoxitongzhi.png" mode=""></image>
									<text>消息通知</text>
								</view>
							</view>
							<view class="atrulebottom">
								<text>发布{{daily.message_nums_all}}条</text>
								<image v-if="daily.message_status==1" src="../../static/shangsheng.png" mode=""></image>
								<image v-if="daily.message_status== -1" src="../../static/xiajiang.png" mode=""></image>
								<image v-if="daily.message_status== 0" style="width: 25rpx;height: 6rpx;" </view>
							</view>
							<view class="topright">

								<view class="toprighttwo" v-for="(item,index) in message" :key="index">
									<text class="xuexiao">{{item.school_name}}</text>
									<text class="shuliang">{{item.message_nums}}</text>
								</view>

							</view>
						</view>
						<view class="jump">
							<image src="../../static/jiantou.png" mode=""></image>
						</view>
					</view>
					<view class="bottomcenter" @tap="toclassquan">
						<view class="article" style="width: 100%; height: 100%;justify-content: center;">
							<view class="topleft">
								<view class="atrule">
									<view class="leftcneter">
										<image src="../../static/quan.png" mode=""></image>
										<text>班级圈</text>
									</view>
								</view>
								<view class="atrulebottom">
									<text>发布{{daily.class_ring_numsall}}条</text>
									<image v-if="daily.class_ring_status==1" src="../../static/shangsheng.png" mode="">
									</image>
									<image v-if="daily.class_ring_status== -1" src="../../static/xiajiang.png" mode="">
									</image>
									<image v-if="daily.class_ring_status== 0" style="width: 25rpx;height: 6rpx;" </view>
								</view>
								<!-- <view class="topright">
						<text>幼儿园30</text>
						<text>幼儿园30</text>
						<text>幼儿园30</text>
					</view> -->
							</view>
							<view class="jump">
								<image src="../../static/jiantou.png" mode=""></image>
							</view>
						</view>


					</view>
				</view>
			</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutation,
		mapActions
	} from 'vuex';
	export default {
		computed: {
			...mapState({
				userInfo: state => state.user.userInfo,
				isLogin: state => state.user.isLogin
			})
		},
		data() {
			return {
				encryptedData: '',
				iv: '',
				code: '',
				array: ['家长', '老师'],
				index: 0,
				gglist: [],
				text: {},
				id: 0,
				showshujv: {},
				class_id: 0,
				school_id: 0,
				company_id: 0,
				group_id: 0,
				status: '',
				daily: {},
				message: []

			}
		},

		methods: {
			toshoping() {
				uni.navigateToMiniProgram({
					appId: 'wx2c07d99370b346e1',
					path: 'pages/tabBar/index/index',
					extraData: {
						'data1': 'test'
					},
					success(res) {
						// 打开成功
						console.log("打开成功")

					}
				})
			},

			tologin() {
				uni.navigateTo({
					url: '../login/login'
				})
			},
			tochange() {
				uni.navigateTo({
					url: "../tochange/tochange"
				})
			},
			tokebiao() {
				uni.navigateTo({
					url: '../tokebiao/tokebiao?class_id=' + this.class_id
				})
			},
			toschool(school_id) {
				uni.navigateTo({
					url: '../schoolgg/schoolgg?school_id=' + school_id
				})
			},
			toclass() {
				uni.navigateTo({
					url: '../classgg/classgg?class_id=' + this.class_id
				})
			},
			toteacherclass() {
				uni.navigateTo({
					url: '../../pagesA/teacherclass/teacherclass?class_id=' + this.class_id
				})
			},
			toteacher() {
				uni.navigateTo({
					url: '../../pagesA/wenjuan/wenjuan?school_id=' + this.school_id + '&class_id=' + this
						.class_id + '&company_id=' + this.company_id
				})
			},
			toleader() {
				uni.navigateTo({
					url: '../leadernews/leadernews?school_id=' + this.school_id
				})
			},
			tojiazhang() {
				uni.navigateTo({
					url: '../jiazhangzhushou/jiazhangzhushou?class_id=' + this.class_id + '&company_id=' + this
						.company_id
				})
			},
			toweekfood(school_id) {
				uni.navigateTo({
					url: '../weekfood/weekfood?school_id=' + this.school_id
				})
			},

			tomember() {
				uni.navigateTo({
					url: '../../pagesA/member/member?company_id=' + this.company_id
				})
			},
			tonewsteng() {
				uni.navigateTo({
					url: '../../pagesA/newsteng/newsteng?company_id=' + this.company_id
				})
			},

			toclassquan() {
				uni.navigateTo({
					url: '../../pagesA/classquan/classquan?company_id=' + this.company_id
				})
			},
			showcode(token) { //微信登录的接口			
				this.$store
					.dispatch('apiUserAutoLogin', {
						token: token
					})
					.then(res => {
						if (this.userInfo.if_bangd == 0) {
							uni.navigateTo({
								url: "../../pagesA/loginkong/loginkong"
							})
						} else {
							// if (this.userInfo.user_status == "jiaoshi") {
							// 	uni.removeStorageSync("def")
							// 	uni.setStorageSync("def", 1)
							// } else if (this.userInfo.user_status == "jiazhang") {

							// 	uni.removeStorageSync("def")
							// 	uni.setStorageSync("def", 0)
							// } else if (this.userInfo.user_status == "edu_admin") {
							// 	uni.removeStorageSync("def")
							// 	uni.setStorageSync("def", 2)
							// }
						}
						this.text = uni.getStorageSync("abc")
						this.index = uni.getStorageSync("def")
						if (this.text) {
							this.id = this.text.student_id ? this.text.student_id : this.text.class_id
							

						}
						if (this.index == 2) {
							this.company_id = this.text.id ? this.text.id : this.userInfo.edu_res.id
							this.group_id = this.text.group_id ? this.text.group_id : this.userInfo.edu_res
							this.status = this.text.status ? this.text.status : this.userInfo.edu_res.status
						}
						this.showshouyeshujv()
					});

			},

			ggxiangqing(rich) {
				uni.navigateTo({
					url: "../ggxiangqing/ggxiangqing?id=" + rich
				})
			},
			showshouyeshujv() { //获取首页数据信息
				this.$store
					.dispatch('showshouyeshujv', {
						open_id: this.userInfo.openid,
						token: this.userInfo.token,
						id: this.id,
						index: this.index,
						company_id: this.company_id,
						group_id: this.group_id,
						status: this.status
					})
					.then(res => {

						this.showshujv = res.data.data
						this.daily = res.data.data.daily
						if (res.data.data.daily) {
							this.message = res.data.data.daily.message
							if (this.message.length > 3) {
								var b = this.message.slice(0, 3)
								this.message = b
							}
							
							console.log(this.message)
						}

						if (this.index == 0) { //家长端
							this.class_id = res.data.data.class_id
							uni.setStorageSync("class_id", this.class_id)
							uni.setStorageSync("student_id", res.data.data.student_id)
							if (res.data.data.school_id) {
								this.school_id = res.data.data.school_id
								this.getshouyegg(this.school_id)
							}
						} else if (this.index == 1) { //教师端
							if (uni.getStorageSync("student_id")) {
								uni.removeStorageSync("student_id")
							}

							this.class_id = res.data.data.class.class_id
							uni.setStorageSync("class_id", this.class_id)
							if (res.data.data.class.school_id) {
								this.school_id = res.data.data.class.school_id
								this.getshouyegg(this.school_id)
							}
						}

					});
			},
			getshouyegg(school_id) { //首页公告
				this.$store
					.dispatch('getshouyegg', {
						token: this.userInfo.token,
						school_id: school_id

					})
					.then(res => {
						this.gglist = res.data.data;
					});
			},


		},
		onShareAppMessage() {

			return {
				title: '幼儿园家校平台 ',
				path: '/pages/index/index'
			}
		},
		onShow() {
			if (!this.isLogin) {
				if (uni.getStorageSync("token")) { //判断是否有token，然后调用自动登录的接口
					this.$store
						.dispatch('loginByWexin')
						.then(res => {
							this.code = res
							this.showcode(uni.getStorageSync("token")) //自动登录的接口
						});
				} else { //没有token，去登录页面点击登录					
				}

			} else {
				if (this.userInfo.mobile_status == 0) { // 没有绑定手机号，去登录页面获取手机号
					uni.navigateTo({
						url: '../login/login'
					})

				} else {

					if (this.userInfo.if_bangd == 0) { //没有身份跳转空页面
						uni.navigateTo({
							url: "../../pagesA/loginkong/loginkong"
						})
					} else { //根据不同身份展示不同页面
						// if (this.userInfo.user_status == "jiaoshi") { //教师
						// 	uni.removeStorageSync("def")
						// 	uni.setStorageSync("def", 1)

						// } else if (this.userInfo.user_status == "jiazhang") { //家长
						// 	uni.removeStorageSync("def")
						// 	uni.setStorageSync("def", 0)

						// } else if (this.userInfo.user_status == "edu_admin") {
						// 	uni.removeStorageSync("def")
						// 	uni.setStorageSync("def", 2)

						// }
					}
					this.text = uni.getStorageSync("abc")
					this.index = uni.getStorageSync("def")
					if (this.text) {
						this.id = this.text.student_id ? this.text.student_id : this.text.class_id
						

					}
					if (this.index == 2) {
						this.company_id = this.text.id ? this.text.id : this.userInfo.edu_res.id
						this.group_id = this.text.group_id ? this.text.group_id : this.userInfo.edu_res.group_id
						this.status = this.text.status ? this.text.status : this.userInfo.edu_res.status
						console.log(this.status)
					}
					this.showshouyeshujv()

				}

			}

		},
		onLoad() {				
		},
		onPullDownRefresh() {
			this.showshouyeshujv()
			setTimeout(() => {
				uni.stopPullDownRefresh();
			}, 1500)
		}
	}
</script>

<style lang="less">
	body {
		background-color: #fafafa;
	}

	.nav {
		.topbox {
			height: 576rpx;
			background-color: #fff;
			background-image: url(../../static/ding.png);
			background-size: 100% 100%;


			.active {
				width: 100%;
				height: 100%;
				border-radius: 6rpx;
				display: flex;
				flex-direction: column;
				align-items: center;

				.article {
					flex: 7;
					display: flex;
					align-items: flex-end;
					padding: 0 30rpx;
					margin-bottom: 20rpx;


					.otherBox {
						.btnbox {
							display: flex;
							flex-direction: column;
							align-items: center;

							.right {
								font-size: 40rpx;
								font-weight: bold;
								color: #fff;
								line-height: 80rpx;
								text-align: center;
							}

							.imgbox {
								width: 150rpx;
								height: 150rpx;
								border-radius: 50%;
								background-color: #fff;
								box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);


								image {
									width: 150rpx;
									height: 150rpx;
									border-radius: 50%;
								}
							}
						}

						.userbox {
							display: flex;
							align-items: center;
							flex-direction: column;

							.imgbox {
								width: 150rpx;
								height: 150rpx;
								border-radius: 50%;
								box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);


								image {
									width: 150rpx;
									height: 150rpx;
									border-radius: 50%;
								}
							}

							.usernamebox {
								margin-top: 20rpx;
								height: 90rpx;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								font-size: 28rpx;
								color: #1e2ea7;
								font-weight: bold;

							}

							.usernamebox1 {
								margin-top: 20rpx;
								height: 90rpx;
								display: flex;
								flex-direction: column;
								justify-content: center;
								align-items: center;
								font-size: 28rpx;
								color: #1e2ea7;
								font-weight: bold;

							}
						}
					}
				}

				.bottombox {
					flex: 3;
					width: 90%;
					height: 100%;
					background-color: #fff;
					display: flex;
					justify-content: space-between;
					margin-bottom: 60rpx;
					padding: 10rpx 0;
					border-radius: 10rpx;
					// box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
					box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
					position: relative;

					.changebox {
						position: absolute;
						top: -65rpx;
						right: 0rpx;
						width: 50rpx;
						height: 50rpx;

						image {
							width: 50rpx;
							height: 50rpx;
						}
					}

					.onebox {
						width: 50%;
						height: 100%;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						border-left: 1px solid #ccc;

						.topone {
							font-size: 30rpx;
							text-align: center;
						}

						.toptwo {
							margin-top: 10rpx;
							font-size: 24rpx;
							color: #ccc;
						}
					}

					.onebox2 {

						border: 0;
					}
				}


			}

		}

		.constant {
			.zhihui {
				position: relative;
				width: 100%;

				.zhihuilist {
					background-color: #ffff;
					padding: 20rpx 0;
					border-radius: 10rpx;
					display: flex;
					justify-content: flex-start;
					flex-wrap: wrap;

					.zhihuibottom {
						display: flex;
						width: 25%;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						text-align: center;
						margin-bottom: 20rpx;
						font-size: 26rpx;

						image {
							width: 80rpx;
							height: 80rpx;
							margin-bottom: 10rpx;
						}

						text {
							font-size: 26rpx;
						}
					}
				}

				.zhihuilist1 {
					justify-content: center;
				}

			}
		}

		.bottmgg {
			margin: 30rpx 0;
			width: 100%;

			.kongimg {
				width: 100%;
				// height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;

				image {
					width: 300rpx;
					height: 191rpx;
				}

				text {
					color: #7dd2ef;
					font-size: 25rpx;
					width: 300rpx;
					letter-spacing: 1em;
					text-align: center;
				}
			}

			.titlebox {
				height: 60rpx;
				margin-left: 30rpx;
				line-height: 60rpx;
				color: #000;
				font-size: 30rpx;
				font-weight: bold;
			}

			.ggcontentbig {
				margin: 0 20rpx;
				padding: 20rpx;
				// box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
				box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
				border-radius: 10rpx;

				.ggcontent:nth-child(1) {
					border: 0;
				}

				.ggcontent {
					padding: 20rpx 0;
					border-top: 2px solid #3F536E;

					.topgg {
						height: 50rpx;
						display: flex;
						justify-content: space-between;
						align-items: center;
						font-size: 26rpx;
						margin-bottom: 10rpx;

						.titlesf {

							height: 40rpx;
							border-radius: 20rpx;
							background-color: #fda64a;
							padding: 3rpx 15rpx;
							line-height: 40rpx;
							color: #fff;
						}
					}

					.bottomcontent {
						font-size: 26rpx;
					}
				}
			}


		}
	}

	.jiaoyu {
		box-sizing: border-box;

		.topbig {
			position: relative;

			.topbox {
				width: 100%;
				height: 400rpx;
				background-color: #0a98f7;
			}

			.topbottom {
				width: 100%;
				height: 150rpx;
				// background-color: pink;
				position: relative;
			}

			.centerbox {
				position: absolute;
				bottom: 35rpx;
				width: 100%;
				height: 320rpx;
				padding: 50rpx;
				box-sizing: border-box;

				.center {
					width: 100%;
					height: 100%;
					background-color: #fff;
					border-radius: 15rpx;
					box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(5, 112, 253, 0.35);
					display: flex;
					flex-direction: column;
					overflow: hidden;

					.centertop {
						width: 100%;
						height: 50%;
						display: flex;
						justify-content: flex-start;
						align-items: center;
						font-size: 32rpx;
						color: #000;
						font-weight: bold;
						padding-left: 20rpx;
					}

					.centerbottom {
						padding-left: 20rpx;
						padding-top: 5rpx;
						position: relative;
						width: 100%;
						height: 50%;
						background-image: linear-gradient(#ecf7fe, #fff);
						font-size: 28rpx;

						.changebox {
							position: absolute;
							top: -25rpx;
							right: 70rpx;
							width: 50rpx;
							height: 50rpx;

							image {
								width: 50rpx;
								height: 50rpx;
							}
						}
					}


				}

			}
		}

		.bottombox {
			padding: 5rpx 50rpx;
			width: 100%;
			// height: 220rpx;
			// background-color: #0086B3;
			box-sizing: border-box;
			margin-top: -50rpx;

			.bottomcenter {
				// width: 100%;
				height: 100%;
				background-color: #fff;
				border-radius: 15rpx;
				box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
				padding: 20rpx;
				display: flex;
				flex-direction: column;

				.yingyongwenzi {
					font-size: 32rpx;
					font-weight: bold;
				}

				.yingyongbtn {
					display: flex;
					flex-wrap: wrap;

					.zhihuibottom {
						display: flex;
						width: 20%;
						flex-direction: column;
						justify-content: center;
						align-items: center;
						text-align: center;
						margin-top: 20rpx;
						font-size: 26rpx;

						image {
							width: 80rpx;
							height: 80rpx;
							margin-bottom: 10rpx;
						}

						text {
							font-size: 26rpx;
						}
					}
				}


			}
		}

		.bottombox1 {
			padding: 5rpx 50rpx;
			width: 100%;
			height: 180rpx;
			// background-color: #0086B3;
			box-sizing: border-box;
			margin-top: -50rpx;

			.ribao {
				width: 100%;
				height: 65rpx;
				font-size: 32rpx;
				font-weight: bold;
				line-height: 65rpx;
			}

			.bottomcenter {
				// width: 100%;
				height: 100%;
				background-color: #fff;
				border-radius: 15rpx;
				box-shadow: 0rpx 4rpx 17rpx 4rpx rgba(201, 202, 208, 0.35);
				padding: 20rpx;
				display: flex;
				margin-bottom: 20rpx;
				align-items: center;
				box-sizing: border-box;

				.article {
					width: 100%;
					height: 100%;
					// background-color: #0077AA;
					display: flex;
					flex-direction: column;
					align-items: flex-start;
					padding-right: 20rpx;

					.topleft {
						width: 100%;
						display: flex;
						justify-content: space-between;
						align-items: center;
						height: 50%;

						.atrule {
							font-size: 32rpx;
							font-weight: bold;

							.leftcneter {
								display: flex;
								justify-content: center;
								align-items: center;

								image {
									margin-right: 8rpx;
									width: 80rpx;
									height: 80rpx;
								}

							}
						}

						.atrulebottom {
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 28rpx;
							font-weight: bold;

							image {
								width: 20rpx;
								height: 24rpx;
								margin-left: 8rpx;
							}

						}
					}

					.topright {
						display: flex;
						align-items: center;
						justify-content: space-evenly;
						width: 100%;
						height: 50%;
						font-size: 30rpx;
						color: #ccc;

						.toprighttwo {
							display: flex;
							width: 30%;
							
							.xuexiao{
								width: 100%;
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
							}
							.shuliang{
								width: 100%;
								overflow: hidden;
								display: -webkit-box;
								-webkit-box-orient: vertical;
								-webkit-line-clamp: 1;
							}

						}

						

					}


				}

				.jump {


					image {
						width: 27rpx;
						height: 45rpx;
					}
				}

			}

			.bottomcenter1 {
				height: 220rpx;
				display: flex;
				flex-direction: column;
				align-items: flex-start;

				.topleft {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;
					height: 50%;
					padding-right: 40rpx;
					box-sizing: border-box;

					.atrule {
						font-size: 32rpx;
						font-weight: bold;

						.leftcneter {
							display: flex;
							justify-content: center;
							align-items: center;

							image {
								width: 80rpx;
								height: 80rpx;
								margin-right: 8rpx;
							}

						}
					}

					.atrulebottom {
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28rpx;
						font-weight: bold;

						image {
							width: 20rpx;
							height: 24rpx;
							margin-left: 8rpx;
						}

					}
				}

				.topright {
					display: flex;
					align-items: center;
					width: 100%;
					height: 50%;
					font-size: 30rpx;
					color: #ccc;
					padding-left: 30rpx;
				}
			}

		}
	}
</style>
